<template>
  <div>
    <button @click="jumpQuery">query问号参数</button>
    <br />
    <br />
    <button @click="jumpParams">params动态路由</button>
    <br />
    <br />
    <!-- <router-link to="/testquery?msg=abc">query问号传参</router-link> -->
    <router-link
      :to="{
        name: 'PageQuery',
        query: {
          msg: 'abc'
        }
      }"
    >query问号传参</router-link>
    <br />
    <br />
    <!-- <router-link to="/testparams/abc">params动态传参</router-link> -->
    <router-link
      :to="{
        name: 'PageParams',
        params: {
          msg: 'abc'
        }
      }"
    >params动态传参</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    jumpQuery() {
      //   this.$router.push({
      //     path: "/testquery?msg=abc"
      //   });
      //如果跳转只是path 没有其他东西可以用字符串代替对象
      //   this.$router.push("/testquery?msg=adc");
      //如果路由配置有name,可以使用name进行跳转
      this.$router.push({
        name: "PageQuery",
        query: {
          msg: "abc"
        }
      });
    },
    jumpParams() {
      //   this.$router.push({
      //     path: "/testparams/abc"
      //   });
      //如果跳转只是path 没有其他东西可以用字符串代替对象
      //   this.$router.push("/testparams/abc");
      //如果路由配置有name,可以使用name进行跳转
      this.$router.push({
        name: "PageParams",
        params: {
          msg: "abc"
        }
      });
    }
  }
};
</script>

<style>
</style>